<template>
  <div
    class="wrap-scroll"
    :ref="wrapRef"
    :style="{ height: `${height}px` }"
    @mouseenter="stopScroll"
    @mouseleave="startScroll"
  >
    <div class="scroll-area" :ref="scrollRef">
      <slot></slot>
      <slot v-if="showDouble"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  components: {},
  props: {
    width: {
      type: Number,
      default: 400,
    },
    height: {
      type: Number,
      default: 50,
    },
  },
  data() {
    return {
      intAnimate: null,
      wrapRef: "wrap" + Math.random(),
      scrollRef: "scroll" + Math.random(),
      stop: true,
      lastTime: "",
      animeJob: "",
      showDouble: false,
    };
  },
  watch: {},
  mounted() {
    // document.querySelector("#scroll").addEventListener('scroll',this.stopScroll,true)
    //每次滚动条向左移动2，改变speed可以调整滚动速度
    // const speed = 1
    //设置浏览器刷新帧率，调整滚动速度

    this.$nextTick(() => {
      this.lastTime = new Date().getTime(); //上次执行的时刻
      // 在mounted阶段，才可以获取真实DOM节点
      // showArea.scrollTop = 0
      // const showArea = this.$refs[this.wrapRef]
      // const slotArea = this.$refs[this.scrollRef]
      // console.log(slotArea.clientHeight, showArea.clientHeight)
      // this.showDouble = showArea.clientHeight <= slotArea.scrollHeight;
      this.animeJob = requestAnimationFrame(this.animate);
    });
  },
  beforeDestroy() {
    clearInterval(this.intAnimate);
  },
  methods: {
    animate() {
      const fps = 30;
      const fpsInterval = 1000 / fps;
      const showArea = this.$refs[this.wrapRef];
      const slotArea = this.$refs[this.scrollRef];
      this.showDouble = slotArea.clientHeight > showArea.clientHeight;
      this.animeJob = requestAnimationFrame(this.animate);
      // 执行时的时间
      let now = new Date().getTime();
      let elapsed = now - this.lastTime;
      // 经过了足够的时间
      if (elapsed > fpsInterval) {
        this.lastTime = now - (elapsed % fpsInterval); //校正当前时间
        // console.log(showArea)
        if (showArea.scrollTop >= slotArea.scrollHeight / 2) {
          showArea.scrollTop = 0;
          // this.showDouble = false
        } else {
          showArea.scrollTop += 1;
        }
      }
    },
    resetScroll() {
      this.$refs[this.wrapRef].scrollTop = 0;
    },
    startScroll() {
      this.intAnimate = setInterval(() => {
        this.animate();
      }, 4000);
    },
    stopScroll() {
      clearInterval(this.intAnimate);
      cancelAnimationFrame(this.animeJob);
    },
  },
  destroyed() {
    this.stopScroll();
  },
};
</script>

<style scoped lang="scss">
.wrap-scroll {
  /*overflow: hidden;*/
  overflow-y: auto;
  overflow-x: hidden;

  &:hover::-webkit-scrollbar {
    width: 0px;
    height: 1px;
    background: transparent;
  }
  &:hover::-webkit-scrollbar-thumb {
    border-radius: 3px; /*滑块圆角*/
  }
}

.wrap-scroll::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}
.wrap-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.wrap-scroll::-webkit-scrollbar-thumb {
  background: #3486a8; /*滑块颜色*/
  border-radius: 5px; /*滑块圆角*/
}

.wrap-scroll::-webkit-scrollbar-thumb:hover {
  background: #0881f9; /*鼠标移入滑块变色*/
}
</style>
